<template>
	<!-- 上传视频或者图片 -->
	<view class="up-page">
		<!--图片-->
		<view class="show-box" v-for="(item,index) in imageList" :key="index">
			<image class="full" :src="item" :data-src="image" @tap="previewImage(item)">
			</image>
			<view class="delect-icon" @tap="delect(index)">
				<image class="full" :src="clearIcon" mode=""></image>
				<!--图片或者视频上传成功了，点击右上角叉号-->
			</view>
		</view>
		<!--视频-->
		<view class="show-box" v-for="(item1, index1) in videoList" :key="index1">
			<video class="full" :src="item1"></video>
			<view  class="delect-icon" @tap="delectVideo(index1)">
				<image class="full" :src="clearIcon" mode=""></image>
			</view>
		</view>
		<view v-if="VideoOfImagesShow" @tap="chooseVideoImage" class="box-mode">
			<image class="full" :src="selectfile" mode=""></image>
			<!-- 上传图标 懒得写，整个的图 -->
		</view>
	</view>
 
</template>
<script>
	var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	];
	export default {
		data() {
			return {
				// 图标
				clearIcon: '',
				selectfile: '',
				VideoOfImagesShow: true, // 页面图片或视频数量超出后，拍照按钮隐藏
				imageList: [], //存放图片的地址
				videoList: [], //视频存放的地址
				sourceType: ['拍摄', '相册', '拍摄或相册'],
				sourceTypeIndex: 2,
				cameraList: [{
					value: 'back',
					name: '后置摄像头',
					checked: 'true'
				}, {
					value: 'front',
					name: '前置摄像头'
				}],
				cameraIndex: 0, //上传视频时的数量
				maxCount:9//图片和视频允许上传的总数
			}
		},
		onUnload() {
			(this.imageList = []), (this.sourceTypeIndex = 2), (this.sourceType = ['拍摄', '相册', '拍摄或相册']);
		},
		methods: {
			//点击上传图片或视频
			chooseVideoImage() {
				uni.showActionSheet({
					title: '选择上传类型',
					itemList: ['图片', '视频'],
					success: res => {
						console.log(res);
						if (res.tapIndex == 0) {
							this.chooseImages();
						} else {
							this.chooseVideo();
						}
					}
				});
			},
			//上传图片
			chooseImages() {
				uni.chooseImage({
					count: this.maxCount, //允许选择的数量
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: res => {
						this.imageList = this.imageList.concat(res.tempFilePaths);
						//console.log(this.imageList)
						if (this.imageList.length+this.videoList.length == this.maxCount) {
							this.VideoOfImagesShow = false; //图片上传数量和count一样时，让点击拍照按钮消失
						}
					}
				})
			},
			//上传视频
			chooseVideo(index) {
				uni.chooseVideo({
					maxDuration: 60, //拍摄视频最长拍摄时间，单位秒。最长支持 60 秒
					count: this.maxCount,
					camera: this.cameraList[this.cameraIndex].value, //'front'、'back'，默认'back'
					sourceType: sourceType[this.sourceTypeIndex],
					success: res => {
						this.videoList = this.videoList.concat(res.tempFilePath);
						if (this.imageList.length+this.videoList.length == this.maxCount) {
							this.VideoOfImagesShow = false;
						}
						console.log(this.videoList);
					}
				})
			},
			//预览图片
			previewImage: function(e) {
				console.log(e)
				uni.previewImage({
					current: e,
					urls: this.imageList
				});
			},
			// 删除图片
			delect(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除该图片',
					success: res => {
						if (res.confirm) {
							this.imageList.splice(index, 1);
						}
						if (this.imageList.length+this.videoList.length  == this.maxCount) {
							this.VideoOfImagesShow = false;
						} else {
							this.VideoOfImagesShow = true;
						}
					}
				});
			},
			// 删除视频
			delectVideo(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除此视频',
					success: res => {
						if (res.confirm) {
							this.videoList.splice(index, 1);
						}
						if (this.imageList.length+this.videoList.length  == this.maxCount) {
							this.VideoOfImagesShow = false;
						} else {
							this.VideoOfImagesShow = true;
						}
					}
				});
			},
		}
	}
</script>
<style lang="scss">
	/* 统一上传后显示的盒子宽高比 */
	.box-mode {
		width: 27vw;
		height: 27vw;
		
		border-radius: 8rpx;
		overflow: hidden;
	}
	
	.full {
		width: 100%;
		height: 100%;
	}
 
	.up-page {
		display: flex;
		flex-wrap: wrap;
		display: flex;
		width: 100%;
		.show-box:nth-child(3n){
			margin-right: 0;
		}
		.show-box {
			position: relative;
			margin-bottom:4vw;
			margin-right: 4vw;
			@extend .box-mode;
 
			.delect-icon {
				height: 40rpx;
				width: 40rpx;
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				z-index: 1000;
			}
		}
	}
 
</style>